<template>
  <div id="echartContainer3"></div>
</template>

<script>

  export default {
    name: 'component3',
    props: {
      languageCounts: {
        default: function () {
          return [0, 0, 0, 0, 0]
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '开发语言讨论量',
            color: 'white',
            textStyle: {
              fontSize: 18,//字体大小
              color: '#ffffff',//字体颜色
              margin: [0, 0, 0, 10]
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: " {b}：{c} "
          },
          color: ['#2599A0', '#2599A0', '#2599A0', '#2599A0', '#2599A0', '#2599A0'],    //环形颜色
          series: [
            {
              name: '来源',
              type: 'pie',
              radius: ['30%', '50%'],
              center: ['50%', '60%'],     //饼图大小
              data: [
                {value: 11, name: 'Java'},   //value ->C  name ->B
                {value: 15, name: 'PhP'},
                {value: 7, name: 'C++'},
                {value: 4, name: 'IOS'},
                {value: 3, name: 'Python'},
              ],
              itemStyle: {        //饼图按块划分时是否需要用线隔开，  不需要注释即可
                normal: {
                  borderWidth: 10,
                  borderColor: '#2C2D3B'
                }
              }
            }
          ]
        }

      }
        ;
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer3'));
        // 绘制基本图表

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);

        //             myChart.hideLoading();
      }
    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    },
    watch: {
      languageCounts: function () {

        let myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer3'));
        if (!this.languageCounts[0]) {
          return false
        }
        console.info("LanguageCounts Changed");
        let dataset = [
          {value: this.languageCounts[0], name: 'Java'},
          {value: this.languageCounts[1], name: 'PhP'},
          {value: this.languageCounts[2], name: 'C++'},
          {value: this.languageCounts[3], name: 'IOS'},
          {value: this.languageCounts[4], name: 'Python'},
        ];
        myChart.setOption({
          series: [{data: dataset}]
        });
      }
    },
  };
</script>
<style scoped>
  #echartContainer3 {
    width: 100%;
    height: 100%;
  }
</style>
